<template>
  <div>
    <div style="width: 400px">
      <el-input
        style="width: 245px; border-right: none"
        size="mini"
        v-model="msg"
        @keyup.enter.native="sendMsg"
        placeholder="请输入消息"
      ></el-input>
      <el-button
        style="display: inline-block"
        plain
        type="primary"
        size="mini"
        @click="sendMsg"
        >发送</el-button
      >
    </div>
    <!-- <div id="msg">
     <ul>
      <li v-for="(item,i) in msgList" :key="i">
        <p style="text-algin:center">{{item.userName}} -- {{new data(item.time) }}</p>
        <p>{{item.msg}}</p>
      </li>
     </ul>
    </div> -->
    <div id="msg"></div>
    <el-button
      plain
      type="warning"
      size="mini"
      @click="handEmpty"
      style="width: 302px; margin-top: 5px"
      >清空</el-button
    >
  </div>
</template>

<script>
//参数1：websocket的服务地址
var socket = new WebSocket("ws://localhost:3000");
export default {
  data() {
    return {
      msg: "",
      userName: this.$cookie.get("userName"),
      msgList: [],
    };
  },
  created() {},
  mounted() {
    // 监听websocket事件，绑定本地事件，this对象
    socket.addEventListener("open", this.handOpen.bind(this), false);
    socket.addEventListener("close", this.handClose.bind(this), false);
    socket.addEventListener("error", this.handError.bind(this), false);
    socket.addEventListener("message", this.handMessage.bind(this), false);
  },
  methods: {
    //发送
    sendMsg() {
      const msg = this.msg;
      if (!msg.trim().length) {
        return;
      }
      socket.send(msg);
      this.msg = "";
      let msg1 = document.getElementById("msg");
      msg1.style.display = "block";
    },
    handOpen(e) {
      alert("连接服务成功");
    },
    handClose(e) {
      console.log(e);
    },
    handError(e) {
      console.log(e);
    },
    // 接收消息
    handMessage(e) {
      let data = JSON.parse(e.data);
      // console.log(data);

      // this.$message.success(`通知:${data.msg}`)
      let dv = document.createElement("div");
      dv.innerText = data.msg + "---" + data.time;
      let msg = document.getElementById("msg");
      // msg.style.display = "block";
      if (data.type == 0) {
        dv.style.color = "green";
        this.$notify.success({
          title: "新用户连接提醒",
          message: `${data.msg}`,
          showClose: false,
        });
      } else if (data.type == 1) {
        dv.style.color = "red";
        this.$notify.error({
          title: "用户断开提醒",
          message: `${data.msg}`,
          showClose: false,
        });
      } else {
        this.$notify.warning({
          title: "用户消息提醒",
          message: `${data.msg}`,
          showClose: false,
        });
        dv.style.color = "#000";
      }
      msg.appendChild(dv);
      // let obj = {
      //   type: data.type,
      //   msg: data.type,
      //   time: data.time,
      // };
      // let data1 = JSON.parse(e.data);
      // console.log(data);
      // this.msgList.push(data);
      // console.log(JSON.parse(e.data));
    },
    handEmpty() {
      let msg = document.getElementById("msg");
      msg.style.display = "none";
      msg.innerHTML = "";
    },
  },
};
</script>

<style scoped>
#msg {
  color: aqua;
  border: 1px solid #ccc;
  width: 300px;
  margin-top: 10px;
}
</style>